<script setup lang="ts">
import { publishArticleAPI } from '@/apis/card';
import ChannleList from '@/components/channleList.vue';
import type { ArticleForm} from '@/types/article';
import service from '@/utils/https';
import { Plus } from '@element-plus/icons-vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import type { UploadRequestOptions } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const articleForm = ref<ArticleForm>({
  title: '',
  channel_id: 0,
  cover: { type: 0, images: [] },
  content: '',
})

// 发布文章
const router = useRouter()
const publishArticle = async()=>{
  const res = await publishArticleAPI(articleForm.value)
  console.log('res',res);
  router.push('/article')
}

// 上传图片
const onUpload = async(options: UploadRequestOptions)=>{
  const fd = new FormData()
  fd.append('image', options.file)
  const res = await service.post('/v1_0/upload',fd)
  console.log('resurl',res);
  articleForm.value.cover.images.push(res.data.data.url)
}

// 表单验证
const articleFormRules = {
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' },
    { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' },
  ],
  channel_id: [
    { required: true, message: '请选择文章频道', trigger: 'blur' },
  ],
  cover: [
    { required: true, message: '请上传封面图', trigger: 'change' },
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' },
  ],
}

</script>

<template>
  <el-card shadow="always">
    <template #header>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>

         <!-- 通过 template 编组，通过一个 v-if 控制多个标签的条件渲染 -->
        <template v-if="$route.params.id">
          <el-breadcrumb-item to="/article">内容管理</el-breadcrumb-item>
          <el-breadcrumb-item>修改文章</el-breadcrumb-item>
        </template>

        <el-breadcrumb-item v-else>发布文章</el-breadcrumb-item>
      </el-breadcrumb>
    </template>

    <!-- 表单 -->
    <el-form ref="articleFormRef" label-width="120px" :model="articleForm" :rules="articleFormRules" >
      <el-form-item label="标题：" prop="title">
        <el-input v-model="articleForm.title" placeholder="请输入标题" style="width: 400px;"></el-input>
      </el-form-item>

      <el-form-item label="频道：" prop="channel_id">
        <ChannleList/>
      </el-form-item>

      <el-form-item label="封面：" prop="cover">
        <el-radio-group v-model="articleForm.cover.type" :aria-hidden="false">
          <el-radio :label="1">单图</el-radio>
          <el-radio :label="3">三图</el-radio>
          <el-radio :label="0">无图</el-radio>
          <el-radio :label="-1">自动</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
          <div v-if="articleForm.cover.type===1|| articleForm.cover.type===3">
          <el-upload
            :limit="articleForm.cover.type"
            :http-request="onUpload"
            class="avatar-uploader"
            list-type="picture-card"
          >
            <el-icon ><Plus /></el-icon>
          </el-upload>
      </div>
        </el-form-item>

      <el-form-item label="内容：" prop="content">
        <div>
          <QuillEditor content-type="html" theme="snow" v-model:content="articleForm.content"/>
        </div>
      </el-form-item>

      <el-form-item label="" v-if="$route.params.id">
        <el-button type="primary">修改文章</el-button>
        <el-button>存入草稿</el-button>
      </el-form-item>
      <el-form-item label="" v-else>
        <el-button type="primary" @click="publishArticle">发布文章</el-button>
        <el-button >存入草稿</el-button>
      </el-form-item>
    </el-form>
    {{ articleForm }}
  </el-card>
</template>

<style scoped>


</style>
